<template>
  <main class="login-form">
    <a-row>
      <a-col :span="12"><section class="left"></section></a-col>
      <a-col :span="12"
        ><section class="right">
          <section class="title">{{ SysName }}</section>
          <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
            autocomplete="on"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
            <a-form-item
              label="账号"
              name="username"
              :rules="[{ required: true, message: '账号是一定要输入的啊！' }]"
            >
              <a-input
                v-model:value="formState.username"
                placeholder="请输入账号"
              >
                <template #prefix
                  ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
                /></template>
              </a-input>
            </a-form-item>

            <a-form-item
              label="密码"
              name="password"
              :rules="[{ required: true, message: '密码是一定要输入的啊！' }]"
            >
              <a-input-password
                v-model:value="formState.password"
                placeholder="请输入密码"
              >
                <template #prefix
                  ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
                /></template>
              </a-input-password>
            </a-form-item>

            <a-form-item name="remember" :wrapper-col="{ offset: 0, span: 24 }">
              <a-checkbox v-model:checked="formState.remember"
                >记住登录信息</a-checkbox
              >
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
              <a-button
                type="primary"
                html-type="submit"
                class="login-form-button"
                :disabled="
                  formState.username === '' || formState.password === ''
                "
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </section></a-col
      >
    </a-row>
  </main>
</template>

<script setup lang="ts">
import { reactive, computed, ref } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { userLogin } from "@/api/user";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
});
// 系统名称
let SysName = ref<string>("不知道什么系统");
const router = useRouter();
const store = useStore();

const onFinish = (values: any) => {
  userLogin(values).then((res) => {
    const { TOKEN, code } = res.data;
    if (code === 200) {
      window.localStorage.setItem("TOKEN", TOKEN);
      message.success("登录成功，" + values.username + "欢迎你！");
      store.commit("setUserInfo", values);
      console.log(res.data, "llllll");
      router.push({ path: "/home" });
    } else {
      message.error("登录失败，请检查输入！");
    }
  });
};

const disabled = computed(() => {
  return !(formState.username && formState.password);
});

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style lang="scss">
.login-form {
  width: 20rem;
  height: 100%;
  padding: 1rem 0rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 10rem;
    height: 9rem;
    background: url("@/assets/images/login/bookbg.jpg") no-repeat;
    background-size: cover;
    border-radius: 7px 0 0 7px;
  }
  .right {
    width: 10rem;
    height: 9rem;
    padding: 0.5rem 0.5rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 7px 7px 0;
    .title {
      color: rgb(177, 8, 239);
      font-family: "宋体";
      font-size: 0.6rem;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .login-form-button {
      width: 100%;
    }
    .ant-form-item-label > label {
      // color: #ffffff;
    }
    .ant-checkbox-wrapper {
      // color: #ffffff;
    }
  }
}
</style>